<template>
  <div>
    <nav-bar title="实时巡检故障处理"></nav-bar>
    <div class="realTimeInspection maxinBox">
      <van-row class="imagesTop">
        <van-col :span="8" v-for="(item, index) in data.trouble.troubleAttachmentList" :key="index">
          <div>
            <img :src="item" @click="bigAvatar(item)">
          </div>
        </van-col>
      </van-row>
      <div>
        <van-cell title="问题类别" :value="data.trouble.categoryName || '--'"/>
        <van-cell title="故障点位" :value="data.pointDesc || '--'"/>
        <van-cell title="截止日期" :value="data.expireDate | formatDate('YYYY-MM-DD HH:mm')"/>
        <van-field
          class="textarea"
          type="textarea"
          :value="data.trouble.troubleDesc"
          name="问题描述"
          label="问题描述"
          disabled
        />
        <van-cell title="详情" is-link @click="otherDetails" />
        <van-field
          class="textarea marginTop5"
          type="textarea"
          v-model="form.reformDesc"
          name="整改描述"
          label="整改描述"
          placeholder="请输入整改描述"
          :rules="[{ required: true, message: '请填写整改描述' }]"
        />
        <van-field name="uploader" label="上传照片">
          <template #input>
            <van-uploader multiple :max-count="3" v-model="imagesList" :after-read="onUploader" :before-delete="delUpload" />
          </template>
        </van-field>
      </div>
      <div class="marginTop5" style="padding: 0.3125rem 1.25rem;">
        <van-button round block type="info" native-type="onSubmit" @click="onSubmit">
          提交整改
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {ImagePreview} from 'vant'
  import fixedInspectionAPI from '../../../../api/workAPI/fixedInspectionAPI.js'
  import dashbordAPI from '../../../../api/dashbordAPI.js'
  export default {
    data() {
      return {
        data: null,
        form: {
          id: JSON.parse(localStorage.getItem('realTimeDetails')).itemData.trouble.id,
          reformDesc: JSON.parse(localStorage.getItem('realTimeDetails')).itemData.trouble.reformDesc,
          reformAttachmentList: []
        },
        inspectionDesc: '',
        imagesList: [],
        images: []
      }
    },
    methods: {
      // 放大图片
      bigAvatar(img) {
        ImagePreview({
           images: [img],
        })
      },
      // 上传图片
      onUploader(file) {
        file.status = 'uploading'
        file.message = '上传中'
        dashbordAPI.uploadAvatar(file.file).then(res => {
          file.status = ''
          file.message = ''
          this.form.reformAttachmentList.push(res.fileUrl)
        }).finally(() => {
          file.status = ''
          file.message = ''
        })
      },
      // 删除图片
      delUpload(file) {
        this.imagesList.forEach(item => {
          if (item.file.name === file.file.name) {
            let index = this.imagesList.indexOf(item);
            this.imagesList.splice(index, 1)
            this.form.reformAttachmentList.splice(index, 1)
          }
        })
      },
      // 其他详情
      otherDetails() {
        this.$router.push({
          name: 'RealTaskDetails',
          params: {
            data: this.data
          }
        })
      },
      // 提交表单
      onSubmit() {
        if (this.imagesList.length === 0) {
          this.$toast.fail('请选择图片')
          return
        }
        if (this.form.reformAttachmentList.length === 0) {
          this.$toast.fail('请选择图片')
          return
        }
        this.$dialog.confirm({
          title: '温馨提示',
          message: '提交后信息无法修改，请确认信息无误',
        }).then(() => {
          fixedInspectionAPI.taskRectification(this.form).then(res => {
            this.$toast('提交成功')
            this.$router.push({
              name: 'RealTimeInspection'
            })
          })
        })
      }
    },
    mounted() {
      this.data = JSON.parse(localStorage.getItem('realTimeDetails')).itemData
      // this.data = JSON.parse(JSON.stringify(this.$route.params.item))
    }
  }
</script>
